<style>
    /* 根据字数修改 */
    .layui-form-label {
        width: 60px;
    }
</style>
<div class="layuimini-container layuimini-page-anim">
    <!-- 用于创建子页面 -->
    <div class="page-create"></div>

    <!-- page-main-create -->
    <!-- 用于显示 隐藏 -->
    <div class="layuimini-main page-main-create">
        <div class="title-row pb-0 layuimini-title">
            <div class="title-left">
                <div class="title-info">
                    <i class="layui-icon layui-icon-return anticon mr-1" id="backBtn"></i>
                    <div class="layui-tabs layui-hide-v noborder" id="planTabs">
                        <ul class="layui-tabs-header">
                            <li lay-closable="false">排班详情</li>
                            <li lay-closable="false">出勤详情</li>
                            <li lay-closable="false">作业详情</li>
                            <li lay-closable="false">覆盖率详情</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="title-right">
                <span class="layui-font-gray">（2025-06-30—2025-06-30）</span>
            </div>
        </div>



        <!-- 排班详情 -->
        <div id="work-0" class="work-section layui-hide section pb-0">
            <div class="layui-bg-gray p-4">
                <div class="layui-font-black">• 已排班车(天)：单日车辆有排班计1车(天)，多个排班也只计1车(天) </div>
                <div class="layui-font-black">• 总车(天)：单日内每辆正常状态的车辆计1车(天) </div>
                <div class="layui-font-gray layui-font-12"> *每日故障、备用状态的车辆不纳入上述两项统计</div>
            </div>
            <div class="layui-tabs layui-tabs-card noborder mt-3" id="work_detail">
                <ul class="layui-tabs-header">
                    <li lay-id="temporaryPlan1">总车（天）</li>
                    <li lay-id="temporaryPlan2">已排班车（天）</li>
                    <li lay-id="temporaryPlan3">未排班车（天）</li>
                </ul>
            </div>
        </div>
        <!-- 出勤详情 -->
        <div id="work-1" class="work-section layui-hide section pb-0">
            <div class="layui-bg-gray p-4">
                <div class="layui-font-black">• 当天内有多任务时，只要出勤一个任务就算出勤 </div>
                <div class="layui-font-black">• 故障或备用车辆已生成的作业任务，会计入考勤率</div>
            </div>
            <div class="layui-tabs layui-tabs-card noborder mt-3" id="work1_detail">
                <ul class="layui-tabs-header">
                    <li lay-id="temporaryPlan1">已排班车（天）</li>
                    <li lay-id="temporaryPlan2">作业车（天）</li>
                    <li lay-id="temporaryPlan3">未作业车（天）</li>
                </ul>
            </div>
        </div>
        <!-- 作业详情 -->
        <div id="work-2" class="work-section layui-hide section pb-0">
            <div class="layui-tabs layui-tabs-card noborder mt-3" id="work2_detail">
                <ul class="layui-tabs-header">
                    <li lay-id="temporaryPlan1">排班作业数</li>
                    <li lay-id="temporaryPlan2">实际作业数</li>
                    <li lay-id="temporaryPlan3">未完成作业数</li>
                </ul>
            </div>
        </div>
        <!-- 覆盖率详情 -->
        <div id="work-4" class="work-section layui-hide section pb-0">
            <div class="layui-tabs layui-tabs-card noborder  mt-3" id="work3_detail">
                <ul class="layui-tabs-header">
                    <li lay-id="periodicPlan1">全部作业覆盖数</li>
                    <li lay-id="periodicPlan2">未完全作业覆盖数</li>
                </ul>
            </div>
        </div>
        <!-- 列表 -->
        <div class="table-stripe px-5">
            <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
        </div>
    </div>
</div>
<script>
    layui.use(['form', 'table', 'tabs', 'miniPage', 'element'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            tabs = layui.tabs,
            laydate = layui.laydate,
            layer = layui.layer,
            util = layui.util,
            element = layui.element,
            miniPage = layui.miniPage;

        // 获取存储的数据
        var appData = layui.sessionData('CAR_WORK_DETAIL_PARAMS')
        const { pageType } = appData
        if (pageType) {
            console.log('子页面的值===pageType', pageType)
        }
        /******************** 事件 start ********************/

        // 地图页面返回事件
        $('#backBtn').on('click', function () {
            miniPage.backPageCreate()
        });
        /******************** 事件 end ********************/



        /******************** 渲染组件 start ********************/
        form.render('select'); //刷新select选择框渲染

        // 初始化选项卡
        tabs.render({
            elem: '#planTabs',
            index: Number(pageType) || 0// 默认选中
        });
        // tabs 切换后的事件
        function handleTabSwitch(tabIndex) {
            // 隐藏所有 work-section
            $('.work-section').addClass('layui-hide');
            // 显示当前 tab 对应的 work-section
            $('#work-' + tabIndex).removeClass('layui-hide');
        }

        // planTabs 切换事件
        tabs.on('afterChange(planTabs)', function (data) {
            var tabIndex = data.index;
            handleTabSwitch(tabIndex); // 调用处理函数
        });

        // 页面加载完成后默认执行一次
        $(document).ready(function () {
            handleTabSwitch(Number(pageType) || 0);
        });




        // 排班详情
        tabs.render({
            elem: '#work_detail',
            index: 0
        });
        tabs.on('afterChange(work_detail)', function (data) {
            console.log('afterChange===', data);
            console.log(data.index);
        });





        // 出勤详情
        tabs.render({
            elem: '#work1_detail',
            index: 0
        });
        tabs.on('afterChange(work1_detail)', function (data) {
            console.log('afterChange===', data);
            console.log(data.index);
        });


        // 作业详情
        tabs.render({
            elem: '#work2_detail',
            index: 0
        });
        tabs.on('afterChange(work2_detail)', function (data) {
            console.log('afterChange===', data);
            console.log(data.index);
        });




        tabs.render({
            elem: '#work3_detail',
            index: 0 // 默认选中
        });
        // tabs 切换后的事件
        tabs.on('afterChange(work3_detail)', function (data) {
            console.log('afterChange===', data);
            console.log(data.index); // 切换前的选中标签索引
        });

        /******************** 渲染组件 end ********************/

        table.render({
            elem: '#currentTableId',
            url: 'api/table.json',
            cols: [[
                { field: 'time', minWidth: 100, title: '日期' },
                { field: 'time', minWidth: 100, title: '车牌号' },
                { field: 'time', minWidth: 100, title: '车辆类型' },
                { field: 'time', minWidth: 100, title: '业务类型' },
                { field: 'time', minWidth: 100, title: '排班情况' },
                { field: 'time', minWidth: 100, title: '车辆状态' },
                { field: 'time', minWidth: 100, title: '所属组织' },
                { field: 'time', minWidth: 100, title: '关联网格' },
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            page: true,
            skin: 'grid',
            size: 'lg'
        });




    });
</script>